<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();
// 跳转页面
const jumpTo = (path) => {
  router.push(path);
  changeShowType(false);
};

// 当前展开的热销产品
let openId = ref(0);

// 修改当前打开的id
const changeActive = (id) => {
  openId.value = id;
};

const list = ref([]);
const getList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/groom/list/2?page=1&limit=4`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      list.value = res.data.data.list;
    }
  } catch (e) {}
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="middle">
    <div class="left">
      <div class="title">{{ $t("common.hot") }}</div>
      <el-button type="primary" class="lookNow" style="width: 186px; font-size: 18px">{{
        $t("common.look")
      }}</el-button>
    </div>
    <div class="hotProductList">
      <div
        class="item"
        v-for="item in list"
        :key="item.id"
        @mouseover="changeActive(item.id)"
        @click="jumpTo('/productDetail?id=' + item.id)"
      >
        <div class="defaultStyle">
          <div class="imgBox">
            <img :src="item.image" alt="" />
          </div>
          <div class="infoBox">
            <div class="name">
              {{ locale === "zh-cn" ? item.store_name : item.en_store_name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.middle {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 60px;
}
.title {
  font-size: 32px;
  // font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px;
  // margin-right: 10px;
  text-align: center;
  // letter-spacing: 5px;
}

.lookNow {
  padding: 0 20px;
  height: 42px;
  width: 186px;
  background: #000000;
  font-size: 18px;
  border-radius: 0;
}

.hotProductList {
  display: flex;
  margin-top: 15px;
  margin-left: 114px;
  justify-content: space-between;

  .item {
    display: flex;
    background-color: #fff;
    padding: 10px 5px;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #fff;
    margin-left: 20px;
    transition: 0.5s all;

    &:hover {
      // border: 1px solid #e4e4e4;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    }

    .defaultStyle {
      width: 180px;
      position: relative;
      transition: 0.5s all;

      .name {
        font-size: 24px;
        white-space: nowrap; /* 不允许换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        text-align: left; /* 可选：设置文本对齐方式 */
      }

      &.openStyle {
        width: 480px;
        display: flex;
        justify-content: space-between;

        .desc {
          display: block;
        }

        .price {
          margin-top: 40px;
        }

        .imgBox {
          width: 150px;
          height: 150px;
          margin-left: 0;
        }
      }

      .imgBox {
        width: 180px;
        height: 180px;
      }
    }

    .infoBox {
      .desc {
        width: 300px;
        max-height: 40px;
        overflow: hidden;
        margin-top: 20px;
        color: #999;
        line-height: 20px;
      }

      .name {
        font-size: 24px;
        // padding: 0 30px;
        text-align: center;
      }

      .price {
        margin-top: 15px;
        display: flex;

        .finalPrice {
          font-size: 20px;
        }

        .originalPrice {
          margin-left: 15px;
          margin-top: 5px;
          text-decoration: line-through; /* 添加删除线 */
          color: #999;
        }
      }
    }

    .imgBox {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
